import {Button, Form, Modal, Selector, Toast} from "antd-mobile";
import {useState} from "react";
import {buyTicket} from "../../../utils/http/TicketController";

const BuyTicketModal = (props: any) => {

    const [passenger, setPassenger] = useState<any>([]);
    const [seat, setSeat] = useState<any>([]);

  return (
      <Modal
          visible={props.visible}
          content={
              <Form footer={
                  <div style={{
                      display: "flex",
                      justifyContent: "space-evenly"
                  }}>
                      <Button type="submit" color="primary">购买</Button>
                      <Button type="button" color="warning" onClick={props.onClose}>取消</Button>
                  </div>
              }
                    onFinish={async ()=>{
                        try {
                            await buyTicket(props.noId, seat[0], passenger[0]);
                            Toast.show({
                                content:"购票成功"
                            });
                        }catch(err){
                            console.log(err);
                            Toast.show({
                                content: "该乘客已经购买过此车票"
                            });
                        }

                        props.onClose();
                    }}
              >

                  <p>选择乘客</p>
                  <Selector
                      options={props.passengers||[]}
                      value={passenger}
                      onChange={v => {
                          console.log(v);
                          console.log(passenger, seat);
                          if (v.length>0)setPassenger([v[0]]);
                      }}
                  />

                  <p>选择座位</p>
                  <Selector
                      options={props.tickets||[]}
                      columns={4}
                      value={seat}
                      onChange={v => {
                          if (v.length>0)setSeat([v[0]]);
                      }}
                  />

              </Form>
          }
      />
  );
};

export {BuyTicketModal};